<template>
    <com-header title="我的"></com-header>
    <van-row class="user" :gutter="20" type="flex" justify="space-between" align="center">
        <van-col :span="6">
        <van-image
            round
            width="80"
            height="80"
            :src="user.avatar"
            />
        </van-col>
        <van-col :span="18" class="user-info text-f ftn15">
            <div class="user-item">
                <span>昵称:</span>
                <span v-text="user.nickname"></span>
            </div>
            <div class="user-item">
                <span>登录名:</span>
                <span v-text="user.realname"></span>
            </div>
            <div class="user-item">
                <span>手机:</span>
                <span v-text="user.mobile"></span>
            </div>
        </van-col>
    </van-row>
    <van-cell-group>
        <van-cell title="我的订单" is-link to="/user/order" />
        <van-cell title="帐号管理" is-link @click="show = true"/>
        <van-cell title="地址管理" is-link to="/user/address"/>
        <van-cell title="帮助中心" is-link to="/user/help" />
    </van-cell-group>
    <van-overlay :show="show" @click="show = false">
        <div class="wrapper">
            <div class="block"  @click.stop>
                <van-grid :column-num="3" square>
                    <van-grid-item to="/account/list">
                        <van-icon name="add-square" color="#1baeae" size="24"/>
                        <div class="p-t-10 ftn13">添加买号</div>
                    </van-grid-item>
                    <van-grid-item to="certification">
                        <van-icon name="friends" color="#1baeae"  size="24"/>
                        <div class="p-t-10 ftn13">实名认证</div>
                    </van-grid-item>
                </van-grid>
            </div>
        </div>
    </van-overlay>
</template>
<script lang="ts">
import { defineComponent, onMounted,ref } from "vue";
import {myData} from '@/service/my'
import { useStore } from "@/stores/store";
interface IUser {
    avatar: string,
    mobile: string,
    nickname: string,
    realname: string
}
export default defineComponent({
    setup(props) {
        const store = useStore();
        const user = ref<IUser>({
            avatar: '',
            mobile: '',
            nickname: '',
            realname: ''
        }), show = ref(false)
        onMounted(() => {
            myData({uid: store.state.user.uid}).then(res => {
                console.log(res)
                if (res.status) {
                    let {avatar, mobile, nickname, realname} = res.data;
                    user.value = {avatar, mobile, nickname, realname}
                }
            })
        })

        return {
            user,
            show
        }
    }
})
</script>
<style lang="less">
.user {
    margin: 10px 10px 30px 10px;
    background-color: @primary-color;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 3px #269090;
    .user-info {
        .user-item {
            padding-bottom: 4px;
        }
    }
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
     .block {
        width: 220px;
        height: 120px;
        background-color: #fff;
        border-radius: 3px;
    }
  }
</style>